import React, { useEffect, useRef } from 'react'
import './index.less'

interface ProcessCircleProps {
  title?: string
  percentage?: number
  noplan?: number
  hasplan?: number
  noplantext?: string
  hasplantext?: string
  onChange?: (type: 'week' | 'month') => void
}

function formatNumber(num = 0) {
  if (num >= 100000) {
    return (num / 10000).toFixed(1) + '万'
  } else {
    return num.toString()
  }
}

const ProcessCircle: React.FC<ProcessCircleProps> = ({
  title = '',
  percentage = 0,
  noplan = 0,
  hasplan = 0,
  noplantext = '未维护',
  hasplantext = '已维护',
  onChange,
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animationRef = useRef<number>()

  useEffect(() => {
    const start = 0
    const end = percentage
    const duration = 1000
    const steps = 60
    const stepValue = (end - start) / steps
    let currentStep = 0
    let currentValue = start
    const ctx = canvasRef.current?.getContext('2d')
    if (!ctx) return
    function drawCircle(start: number, end: number) {
      if (!ctx) return
      const centerX = 100
      const centerY = 100
      const radius = 80
      ctx.clearRect(0, 0, 200, 200)
      ctx.save()
      ctx.lineCap = 'round'
      // background circle
      ctx.beginPath()
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
      ctx.lineWidth = 20
      ctx.strokeStyle = '#A2BFFF'
      ctx.stroke()
      // progress circle
      if (end > 0) {
        const startAngle = -Math.PI / 2
        const endAngle = startAngle + (2 * Math.PI * end) / 100
        ctx.beginPath()
        ctx.arc(centerX, centerY, radius, startAngle, endAngle)
        ctx.lineWidth = 20
        ctx.strokeStyle = '#165DFF'
        ctx.stroke()
      }
      ctx.restore()
    }

    function animate() {
      currentStep++
      currentValue += stepValue
      if (currentStep >= steps) {
        drawCircle(start, end)
      } else {
        drawCircle(start, currentValue)
        animationRef.current = window.setTimeout(animate, duration / steps)
      }
    }
    drawCircle(start, 0)
    animate()
    return () => {
      if (animationRef.current) {
        clearTimeout(animationRef.current)
      }
    }
  }, [percentage])

  return (
    <div className="ccc_wrap_process_circle">
      <div className="circle-chart-title">{title || ''}</div>
      <div className="ccc_wrap_main">
        {onChange && (
          <div className="ccc_wrap_main_select">
            <select
              onChange={(e) => onChange && onChange(e.target.value as 'week' | 'month')}
              style={{
                padding: '4px 16px',
                borderRadius: 6,
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                border: '1px solid #d9d9d9',
                background: '#fff',
                cursor: 'pointer',
                fontSize: 14,
              }}
            >
              <option value="week">本周</option>
              <option value="month">本月</option>
            </select>
          </div>
        )}
        <div className="circle-chart">
          <canvas ref={canvasRef} width={200} height={200} style={{ width: 200, height: 200 }} />
          <div className="percentage">{percentage}%</div>
        </div>
        <div className="stats">
          <div className="stat-item">
            <div className="stat-item-top">
              <div className="block-color" style={{ backgroundColor: '#A2BFFF' }} />
              <div className="value">{formatNumber(noplan)}</div>
            </div>
            <div className="label">{noplantext}</div>
          </div>
          <div className="stat-item">
            <div className="stat-item-top">
              <div className="block-color" style={{ backgroundColor: '#165DFF' }} />
              <div className="value">{formatNumber(hasplan)}</div>
            </div>
            <div className="label">{hasplantext}</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ProcessCircle
